<template>
  <div class="project-details">
<!--    <a @click.prevent="goBack" class="back-class" href="#">项目管理</a>-->
    <!-- 顶部工具栏按钮 -->
<!--    <el-row type="flex" justify="end">-->
<!--      <div v-for="item in toolbarBtns" :key="item.tag">-->
<!--        <el-button style="margin-left: 10px" :type="item.type || 'success'" v-if="btnPermissionUtil.getBtnbtnPermission(item.mode)"-->
<!--                   @click="toolbarClick(item.tag)">{{item.label}}-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-row>-->
    <!-- 主要信息 -->
    <el-row class="row-main-info" :gutter="4">
      <el-col :span="6">
        <el-card class="card">
          <div class="roject_detail">
            <h3 class="module-title">项目详情</h3>
            <div class="active_type">进行中</div>
          </div>
          <div>
            <ul class="info-list">
              <li>
                <div class="title">项目名称</div>
                <div class="value">{{projectInfo.Name}}</div>
              </li>
              <li>
                <div class="title">别名</div>
                <div class="value">{{projectInfo.Aliasname}}</div>
              </li>
              <li>
                <div class="title">起止时间</div>
                <div class="value">{{projectInfo.startToEndDate}}</div>
              </li>
              <li>
                <div class="title">可用天数</div>
                <div class="value">{{projectInfo.validDates}}</div>
              </li>
              <li>
                <div class="title">项目负责人</div>
                <div class="value">{{projectInfo.ProjUserName}}</div>
              </li>
              <li>
                <div class="title">产品负责人</div>
                <div class="value">{{projectInfo.ProdUserName}}</div>
              </li>
              <li>
                <div class="title">测试负责人</div>
                <div class="value">{{projectInfo.TestUserName}}</div>
              </li>
              <li>
                <div class="title">发布负责人</div>
                <div class="value">{{projectInfo.PublUserName}}</div>
              </li>
              <li>
                <div class="title">项目状态</div>
                <div class="value">{{statusLabel}}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-row class="center-content" :gutter="4">
          <el-col :span="8">
            <el-card>
              <div class="title">
                <h3 class="label xmjs">项目介绍</h3>
              </div>
              <div class="sub">
                <div>
                  <div>项目介绍文案</div>
                  <div>暂无项目介绍</div>
                </div>
                <img src="@/assets/img/xmjs.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" v-if="btnPermissionUtil.getBtnbtnPermission('project-team')">
            <el-card @click.native="toolbarClick('team')">
              <div class="title">
                <h3 class="label tt">团队</h3>
                <i class="iconfont icongengduo"></i>
              </div>
              <div class="sub">
                <div></div>
                <img src="@/assets/img/xmjs.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card @click.native="toolbarClick('testcaseindex')">
              <div class="title">
                <h3 class="label cs">测试</h3>
                <i class="iconfont icongengduo"></i>
              </div>
              <div class="sub">
                <div></div>
                <img src="@/assets/img/xmjs.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" v-if="btnPermissionUtil.getBtnbtnPermission('project-task')">
            <el-card @click.native="toolbarClick('plan')">
              <div class="title">
                <h3 class="label dd">迭代</h3>
                <i class="iconfont icongengduo"></i>
              </div>
              <div class="sub">
                <el-button>新计划</el-button>
                <img src="@/assets/img/xmjs.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" v-if="btnPermissionUtil.getBtnbtnPermission('project-need')">
            <el-card @click.native="toolbarClick('needlist')">
              <div class="title">
                <h3 class="label qj">全景</h3>
                <i class="iconfont icongengduo"></i>
              </div>
              <div class="sub">
                <el-button>去建模</el-button>
                <img src="@/assets/img/xmjs.png">
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" v-if="btnPermissionUtil.getBtnbtnPermission('module-manage')">
            <el-card @click.native="toolbarClick('module')">
              <div class="title">
                <h3 class="label mk">模块</h3>
                <i class="iconfont icongengduo"></i>
              </div>
              <div class="sub">
                <el-button>新增模块</el-button>
                <img src="@/assets/img/xmjs.png">
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!--反馈-->
      <el-col :span="6" class="fankui">
        <el-card>
          <div class="item" @click="toolbarClick('test', '')">
            <div class="title">反馈</div>
            <div class="value"><i class="iconfont icongengduo"></i></div>
          </div>
          <div class="buttons">
            <el-button @click="toolbarClick('test', '')">全部</el-button>
            <el-button @click="toolbarClick('test', 'create')">由我创建</el-button>
            <el-button @click="toolbarClick('test', 'accept')">指派给我</el-button>
            <el-button @click="toolbarClick('test', 'complete')">由我解决</el-button>
            <el-button @click="toolbarClick('test', 'unaccept')">未指派</el-button>
          </div>
          <div class="new-fankui">
            <img src="@/assets/img/new-fankui.png" @click="add">
          </div>
        </el-card>
      </el-col>
<!--      <el-col :span="16">-->
<!--        <el-collapse v-model="activeNames">-->
<!--          <el-collapse-item name="3">-->
<!--            <template slot="title">-->
<!--              <h3 class="module-title">项目介绍</h3>-->
<!--            </template>-->
<!--            <div style="margin: 10px">-->
<!--              <div slot="header">-->
<!--                <span>{{projectInfo.Aliasname && projectInfo.Aliasname.toUpperCase()}}</span>-->
<!--              </div>-->
<!--              <template>-->
<!--                <el-row class="status-btn-group" :gutter="20">-->

<!--                </el-row>-->
<!--              </template>-->
<!--            </div>-->
<!--          </el-collapse-item>-->
<!--        </el-collapse>-->
<!--      </el-col>-->
    </el-row>
    <!-- 项目模块反馈情况 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="module-title-c">项目反馈情况</div>
        </template>
        <el-card>
          <search-component :colum="colum" :formValue="formValue" class="search" :isShowExport="true" @exportBtn="exportBtn"
                            @search="getProjectMainInfo" @reset="reset"></search-component>
          <vxe-grid
              stripe
              border
              context-menu
              highlight-hover-row
              show-overflow
              resizable
              export-config
              height="500"
              :data="tableData"
              show-footer
              ref="grid"
              class="table"
              :footer-method="footerMethod" >
            <vxe-table-column field="Modulename" title="模块名称" sortable></vxe-table-column>
            <vxe-table-column field="Typename" title="分类" sortable></vxe-table-column>
            <vxe-table-column field="Status10" title="待确认" sortable></vxe-table-column>
            <vxe-table-column field="Status11" title="确认中" sortable></vxe-table-column>
            <vxe-table-column field="Status12" title="确认完成" sortable></vxe-table-column>
            <vxe-table-column field="Status20" title="对应中" sortable></vxe-table-column>
            <vxe-table-column field="Status21" title="待开始" sortable></vxe-table-column>
            <vxe-table-column field="Status22" title="连接测试完成" sortable></vxe-table-column>
            <vxe-table-column field="Status30" title="系统测试OK" sortable></vxe-table-column>
            <vxe-table-column field="Status31" title="待系统测试" sortable></vxe-table-column>
            <vxe-table-column field="Status32" title="系统测试NG" sortable></vxe-table-column>
            <vxe-table-column field="Status40" title="业务验收OK" sortable></vxe-table-column>
            <vxe-table-column field="Status41" title="待业务验收" sortable></vxe-table-column>
            <vxe-table-column field="Status42" title="业务验收NG" sortable></vxe-table-column>
            <vxe-table-column field="Status50" title="取消" sortable></vxe-table-column>
            <vxe-table-column field="Status51" title="待取消" sortable></vxe-table-column>
            <vxe-table-column field="Status70" title="保留" sortable></vxe-table-column>
            <vxe-table-column field="Status80" title="待客户验收" sortable></vxe-table-column>
            <vxe-table-column field="Status81" title="客户验收OK" sortable></vxe-table-column>
            <vxe-table-column field="Status82" title="客户验收NG" sortable></vxe-table-column>
            <vxe-table-column field="Status90" title="已关闭" sortable></vxe-table-column>
            <vxe-table-column field="Total" title="合计" sortable></vxe-table-column>
          </vxe-grid>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <TestAdd :visible.sync="addVisible" title="反馈管理" @successClose="successClose" :formData="addData" :editModel="editModel"></TestAdd>
  </div>
</template>

<script>
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
import DictionarySelect from "@/components/element/select/DictionarySelect";
import SelectProjectModule from "@/components/element/select/SelectProjectModule";
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
import projectApi from '@/api/projectApi';
import {diffDates, formatDateString} from '@/utils/date';
import {mapGetters} from 'vuex';
import * as filters from "@/filters";
import TestAdd from "@/page/ProjectManage/modules/testModule/TestAdd";

export default {
  components: {
    searchComponent,
    TestAdd
  },
  data() {
    return {
      addVisible: false,
      editModel: 'C',
      addData: {},
      tableToolbar: {
        export: true
      },
      formValue: {
        // acceptid: [],
        // moduleid: [],
        // type: [],
        // creatId: [],
        // env: [],
        // level: [],
        // createStarted: [],
        // createEnd: []
      },
      colum: [
        {
          componentName: SelectProjectModule,
          placeholder: '请选择模块',
          prop: 'moduleid',
          size: 'small',
          value: 'moduleid',
          ref: 'moduleid',
          clearable: true,
          show: true,
          attrs: {
            multiple: true,
            column: [
              { field: 'Name', title: '模块名称' }
            ],
          },
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择反馈环境',
          prop: 'env',
          size: 'small',
          dictTypeCode: 'ENV',
          componentName: DictionarySelect,
          value: 'env',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择分类',
          prop: 'type',
          size: 'small',
          dictTypeCode: 'TEST_TYPE',
          componentName: DictionarySelect,
          value: 'type',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        // {
        //   placeholder: '请选择级别',
        //   prop: 'level',
        //   size: 'small',
        //   dictTypeCode: 'LEVEL',
        //   componentName: DictionarySelect,
        //   value: 'level',
        //   clearable: true,
        //   show: true,
        //   multiple: true,
        //   elcolStyle: {
        //     'width': '200px'
        //   }
        // },
        {
          placeholder: '请选择指派人',
          selectTitle: '指派人',
          prop: 'acceptid',
          size: 'small',
          componentName: SelectProjectTeam,
          value: 'acceptid',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        }, {
          placeholder: '请选择创建人',
          selectTitle: '创建人',
          prop: 'creatId',
          size: 'small',
          componentName: SelectProjectTeam,
          value: 'creatId',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择创建开始时间',
          prop: 'createStarted',
          size: 'small',
          componentName: 'el-date-picker',
          value: 'createStarted',
          clearable: true,
          show: true,
          multiple: true,
          attrs: {
            'value-format': 'timestamp'
          },
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择创建结束时间',
          prop: 'createEnd',
          size: 'small',
          componentName: 'el-date-picker',
          value: 'createEnd',
          clearable: true,
          show: true,
          multiple: true,
          attrs: {
            'value-format': 'timestamp'
          },
          elcolStyle: {
            'width': '200px'
          }
        }

      ],
      toolbarBtns: [
        {label: '团队', tag: 'team', mode: 'project-team'},
        {label: '全景', tag: 'needlist', mode: 'project-need'},
        {label: '测试Case', tag: 'testcase', mode: 'test-case'},
        {label: '模块', tag: 'module', mode: 'module-manage'},
        {label: '迭代', tag: 'plan', mode: 'project-task'},
        {label: '反馈', tag: 'test', mode: 'project-test'},
        // {label: '文档', tag: 'doc'},
        // {label: '版本', tag: 'version'},
        // {label: '项目统计', tag: 'analysis', type: 'warning'}
      ],
      projectInfo: {},
      tableData: [],
      activeNames: ['1']
    }
  },
  computed: {
    ...mapGetters(['dictionary']),
    statusList() {
      return this.dictionary.filter(item => item.DictTypeCode === 'PROJECT_STATUS')
    },
    // 项目状态显示内容
    statusLabel() {
      const item = this.statusList.find(i => i.DictId === this.projectInfo.Status + '');
      return item ? item.DictName : '';
    }
  },
  created() {
    this.getProjectInfo()
    this.getProjectMainInfo()
  },
  activated() {
    this.getProjectInfo()
    this.getProjectMainInfo()
  },
  methods: {
    successClose () {
      this.toolbarClick('test', '')
    },
    add() {
      this.editModel = 'C'
      this.addData = {
        Moduleid: '',
        acceptid: '',
        Type:'',
        Name:'',
        Level:'',
        Desc:'',
        Os:'',
        Browser:'',
        Bussconfirmstatus:'',
        Env:'',
        Attachment:''
      }
      this.addVisible = true
    },
    goBack () {
      this.$router.push(`/view/projectManage`)
    },
    // 导出
    exportBtn () {
      if (this.$refs.grid) {
        this.$refs.grid.openExport()
      }
    },
    footerMethod({columns,data}) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          if (['Status10', 'Status11', 'Status12', 'Status20', 'Status21','Status22', 'Status30','Status31','Status32','Status40', 'Status41', 'Status42', 'Status50',  'Status51', 'Status70', 'Status80','Status81','Status82','Status90','Total'].includes(column.property)) {
            return XEUtils.sum(data, column.property)
          }
          return null
        })
      ]
    },
    toolbarClick(tag, type) {
      let a = `/view/project/${tag}/${this.$route.params.id}`
      this.$router.push({
        path: a,
        query: {
          type: type
        }
      })
    },
    getProjectInfo() {
      projectApi.getById(this.$route.params.id)
          .then(res => {
            if (res && res.Id) {
              this.projectInfo = res;
              this.initProjectInfo();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((a) => {
            this.$message.error('获取项目信息失败')
          });
    },
    getProjectMainInfo() {
      if (this.$route.params.id) {
        let query1 = Object.assign({id: this.$route.params.id || ''}, this.formValue)
        let query = JSON.parse(JSON.stringify(query1))
        if (query.createStarted) {
          query.createStarted = query.createStarted / 1000
        }
        if (query.createEnd) {
          query.createEnd = query.createEnd / 1000
        }
        if (query.createStarted && query.createEnd && query.createStarted === query.createEnd) {
          query.createEnd = query.createEnd + (60 * 60 * 24)
        }
        projectApi.getMainInfo(query).then(res => {
          this.tableData = res
        })
      }
    },
    reset() {
      this.formValue = {
      }
    },
    initProjectInfo() {
      // 可用天数的显示内容
      const dates = diffDates(Date.now(), this.projectInfo.Ended * 1000);
      this.projectInfo.validDates = dates < 0 ? `已延期${Math.abs(dates)}天` : `${dates}天`;
      // 起止时间显示内容
      let a = ''
      if (this.projectInfo.Started && (this.projectInfo.Started.toString()).length > 0 && this.projectInfo.Started > 0) {
        a = filters.formatDatetime(this.projectInfo.Started * 1000)
      }
      let b = ''
      if (this.projectInfo.Ended && (this.projectInfo.Ended.toString()).length > 0 && this.projectInfo.Ended > 0) {
        b = filters.formatDatetime(this.projectInfo.Ended * 1000)
      }
      if (a !== '' && b !== '') {
        this.projectInfo.startToEndDate =
            a/*formatDateString(this.projectInfo.Started * 1000, 'yyyy-MM-dd hh:mm:ss')*/
            + '至'
            + b/*formatDateString(this.projectInfo.Ended * 1000, 'yyyy-MM-dd hh:mm:ss')*/;
      }
    }

  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/page/projectManage/details.scss";
</style>
